<script setup="stafflist">
import staffHttp from '@/api/staffHttp';
import OAMain from '@/components/OAMain.vue';
import timeFormatter from '@/utils/timeFormatter';
import {  ref, reactive, onMounted, watch } from 'vue';
import { ElMessage, paginationEmits } from 'element-plus';
import OADialog from '@/components/OADialog.vue';
import { useAuthStore } from '@/stores/auth';

const authStore = useAuthStore()
const BASE_URL = import.meta.env.VITE_BASE_URL
let tableRef = ref()

// 筛选 上传 下载
let departments = ref([])
let filterForm = reactive({
    department_id:null,
    realname:"",
    date_joined:[]
})

const onSearch=()=>{
    fetchStaffList(1,page_size.value)
}

const onDownload = async ()=>{
    console.log("-----------------------------------------")
    let rows = tableRef.value.getSelectionRows() //获取选中的列
    if(!rows || rows.length == 0){
        ElMessage.info("请选中要导出的员工!")
        return;
    }
    try{
        let response = await staffHttp.downloadStaffs(rows.map(row => row.uid))
        // 使用 标签下载
        let href = URL.createObjectURL(response.data)
        const a = document.createElement("a")
        a.href = href
        a.setAttribute('download','员工信息.xlsx')
        document.body.appendChild(a)
        a.click()
        document.body.removeChild(a)
        URL.revokeObjectURL(href)
    }catch(detail){
        ElMessage.error(detail)
    }
}

const Upload =()=>{}


// 修改员工状态
let handleIndex = 0
let dialogVisible = ref(false)
let staffForm = reactive({
    status: 1 //默认是1
})

const onEditStaff = (index) =>{
    handleIndex =  index
    dialogVisible.value = true
    let staff = staffs.value[index]
    staffForm.status = staff.status
}

const onSubmitEditStaff = async()=>{
    let staff = staffs.value[handleIndex]  // 当前选中的员工
    try{
        let newstaff = await staffHttp.updateStaffStatus(staff.uid,staffForm.status)
        console.log("-----try---")
        ElMessage.success("员工状态修改成功!")
        dialogVisible.value = false
        staffs.value.splice(handleIndex,1,newstaff)
        // vue3 中 ref([]) 数组是响应式的 只要正确地修改 staff.value 页面就会自动刷新
        
    }catch(detail){
        console.log("error is ",detail)
        console.log("-----exception---")
        ElMessage.error(detail)
    }

}

// 分页
let pagination = reactive({
    page:1,
    total:0
})

let page_size = ref(10) //控制页码数量
let staffs = ref([])


// 0、获取员工列表 核心函数
async function fetchStaffList(page,page_size){
    try{
        let data = await staffHttp.getStaffList(page,page_size,filterForm)
        pagination.total = data.count  // 从服务器返回
        pagination.page = page       
        staffs.value = data.results     // 将 后端的返回值 传递给 staffs 数组
    }catch(detail){
        ElMessage.error(detail)
    }
}

// 1、待所有组件都加载完毕后 在去加载 分页
onMounted( async ()=>{
    console.log("onMounted 请求")
    fetchStaffList(1,page_size.value)  // 调用 0
    // 获取部门
    try{
        let data = await staffHttp.getAllDepartment()
        departments.value = data.results
    }catch(detail){
        ElMessage.error(detail)
    }
})

// 2、监听用户输入的 页码

watch(()=> pagination.page,(newPage)=>{
    fetchStaffList(newPage,page_size.value)
 })

watch(page_size,function(value){
    if(pagination.page == 1){
        fetchStaffList(1,value)
    }else{
        paginationEmits.page = 1
    }
})

// 3、上传文件的两个回调
const onUploadSuccess =() =>{
    ElMessage.success("员工信息上传成功！")
    // 重新拉取第一页的员工信息
    fetchStaffList(1,page_size.value)
}

const onUploadFail = (error) =>{
    const detail = JSON.parse(error.message).detail
    ElMessage.error(detail)

}

</script>

<template>
    <OADialog title="修改员工状态" v-model="dialogVisible" @submit="onSubmitEditStaff">
        <el-form :model="staffForm" label-width="100px">
            <el-form-item label="状态">
                <el-radio-group v-model="staffForm.status" class="ml-4">
                    <el-radio :value="1">激活</el-radio>
                    <el-radio :value="3">锁定</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
    </OADialog>
    <OAMain title="员工列表">
        <el-card>
            <el-form :inline="true" class="my-form-inline">
                <el-form-item label="按部门">
                    <el-select v-model="filterForm.department_id">
                        <el-option v-for="department in  departments" :label="department.name" :value="department.id" :key="department.name"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="按姓名">
                    <el-input v-model="filterForm.realname" />
                </el-form-item>
                <el-form-item label="按入职时间">
                    <el-date-picker v-model="filterForm.date_joined" type="daterange" range-separator="到"
                     start-placeholder="起始日期" end-placeholder="结束日期" format="YYYY-MM-DD" value-format="YYYY-MM-DD"/>
                </el-form-item>
                <el-form-item >
                    <el-button type="primary" icon="Search" @click="onSearch"></el-button>
                </el-form-item>
                <el-form-item >
                    <el-button type="danger" icon="Download" @click="onDownload">下载</el-button>
                </el-form-item>
                <el-form-item>
                    <el-upload
                        :action="BASE_URL+'/staff/upload/'"
                        :headers="{Authorization: 'JWT '+authStore.token}"
                        :on-success="onUploadSuccess"
                        :on-error="onUploadFail"
                        :show-file-list="false"
                        :auto-upload="true"
                         accept=".xlsx,.xls">
                        <el-button type="danger" icon="Upload" @click="Upload">上传</el-button>
                    </el-upload>
                </el-form-item>
                

            </el-form>

        </el-card>
        <el-card>
            <el-table :data="staffs" ref="tableRef">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column label="序号" width="60">
                    <template #default="scope">{{ scope.$index + 1 }}</template>
                </el-table-column>
                <el-table-column prop="realname" label="姓名"></el-table-column>
                <el-table-column label="董事">
                    <template #default="scope">
                        <el-tag v-if="scope.row.is_superuser == 1" type="success">董事</el-tag>
                        <el-tag v-else-if="scope.row.is_superuser == 0" type="warning">员工</el-tag>
                        <el-tag v-else type="danger">已锁定</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="email" label="邮箱"></el-table-column>
                <el-table-column label="入职时间">
                    <template #default="scope">
                        {{ timeFormatter.stringFromDate(scope.row.date_joined) }}
                    </template>
                </el-table-column>
                <el-table-column prop="department.name" label="部门"></el-table-column>
                <el-table-column label="状态">
                    <template #default="scope">
                        <el-tag v-if="scope.row.status == 1" type="success">正常</el-tag>
                        <el-tag v-else-if="scope.row.status == 2" type="warning">未激活</el-tag>
                        <el-tag v-else type="danger">已锁定</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button type="primary" icon="Edit" circle @click="onEditStaff(scope.$index)"></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <template #footer>
                <div style="display :flex; justify-content: space-between;">
                    <el-form-item label="每页:">
                        <el-select v-model="page_size" size="small" style="width:100px">
                            <el-option select label="10条/页" :value="10" />   <!--xx条/页 :value=xx-->
                            <el-option label="20条/页" :value="20" />
                        </el-select>
                    </el-form-item>
                    <el-pagination background layout="prev,pager,next" :total="pagination.total"
                        v-model:currentPage="pagination.page" :page-size="page_size" />
                </div>
            </template>
        </el-card>
    </OAMain>
</template>

<style scoped>
.my-form-inline .el-input {
    --el-input-width: 140px;
}

.my-form-inline .el-select {
    --el-select-width: 140px;
}

.el-form--inline .el-form-item {
    margin-right: 20px;
}
</style>